PCPhoto arrow How -To arrow Photo Sharing arrow Build Your Own Web Gallery

Build Your Own Web Gallery

  • el
  • pt
  • A step-by-step guide with screenshots for building your first website

    Print E-mail

    This Article Features Photo Zoom


    STEP 5e: Adjusting The Table

    Cloning

    Styling the table column widths.


    We have our five columns, but right now they’re all set to equal widths. Our design calls for columns 33 pixels wide at each side of the page, and three center columns, each 278 pixels wide for the photos. We can leave the column widths unspecified, but our design may not render properly, so we want to set the column widths.

    Typically, you’ll do this in the cells of the first row. Once you specify column widths in one row of a table, all rows are forced to these widths. If you try to specify different widths for cells in the same column, your page will have problems.

    On line 11 of the code, we add the attribute width=“33px” inside the <td> tag. Our left-most column is now 33 pixels wide. On lines 12-15, we add the widths for the remaining rows. Notice in the design view at the bottom of the screen shot that our table columns reflect the change in widths.

    One note of great importance: Your column widths, if you specify them as we have, must always add up to the total width of your table—never even a pixel more—or everything can go bonkers. I have a table that’s 900 pixels wide, so my column widths must add up to 900 pixels. They do.



    Subscribe to this feed with Addthis!   AddThis Social Bookmark Button
    Tags:
     
     

    PCPhoto Special Offer







    Canadian/Foreign residents, click here.
    Check out our other photo sites:
    outdoor photographerdigital photo pro